<template>
  <div class="example">
    <video
      id="my-player"
      class="video-js"
      controls
    >
      <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4"/>
    </video>
    <div class="btn-wrap">
      <button class="btn" @click="play">播放</button>
      <button class="btn" @click="pause">暂停</button>
      <button class="btn" @click="addVolume">0.5倍音量</button>
      <button class="btn" @click="subVolume">1倍音量</button>
      <button class="btn" @click="addSpeed">0.5倍速</button>
      <button class="btn" @click="subSpeed">1倍速</button>
    </div>
  </div>
</template>
<script>

// 引入video.js相关的js和css
import videojs from 'video.js'
import "video.js/dist/video-js.min.css"
export default {
  name: 'App',
  mounted(){
    let options = {
      width:960,
      height:400,
      userActions:{
        click:false
      }
    }

    let player = videojs('my-player',options,function(){
      
    })
    player.on('ended',function(){
      console.log(player.readyState())
    })
    player.ready(function(){
      console.log(player.readyState())
    })
    
    window.player =player
    
  },
  methods:{
    play(){
      // videojs('my-player').play()
      videojs.players['my-player'].play()

    },
    pause(){
      videojs('my-player').pause()
    },
    addVolume(){
      videojs('my-player').volume(0.5)
    },
    subVolume(){
      videojs('my-player').volume(1)
    },
    addSpeed(){ 
      videojs('my-player').playbackRate(0.5)
    },
    subSpeed(){
      videojs('my-player').playbackRate(1)
    }
  }
}
</script>
<style>
.example{
  width: 1000px;
  margin: auto;
  padding: 20px;
  
}
.btn-wrap{
  width: 100%;
  margin-top:20px;     
}
.btn{
  text-align: center;
  background: #409eff;
  padding:8px 15px;
  margin: 10px;
  border:none;
  outline: none;
  cursor: pointer;

}
</style>

